// 商品及衍生品类
import React, { PureComponent, Fragment } from 'react';
import { connect, routerRedux } from 'dva';
import { TableC } from '../../../../comps';

@connect(({ loading, keyFiguresM }) => ({ loading, keyFiguresM }))
export default class Commodities extends PureComponent {
  state = {
    activeIndex: '',
    columns: [],
    currentPage: 1,
    pageSize: 10,
  };
  componentDidMount() {
    this.changeColumns();
  }

  // 优化表格样式
  changeColumns = () => {
    const {
      keyFiguresM: { commoditiesColumns },
    } = this.props;
    commoditiesColumns.forEach((element) => {
      if (element.key == 'productName') {
        element.render = (val, record) => {
          if (val) {
            return (
              <a onClick={() => this.productOnclick(record)}>
                {record.productCode}-{val}
              </a>
            );
          } else {
            return '--';
          }
        };
      }
    });
    this.setState({ columns: commoditiesColumns });
  };

  // 响应产品点击
  productOnclick = (record) => {
    //将条件缓存
    sessionStorage.setItem('portfolioTracking', JSON.stringify(record));
    //跳转至组合跟踪页面
    this.props.dispatch(routerRedux.push(`/portfolioBuild/portfolioTracking`));
    this.setState({
      activeIndex: record.productId,
    });
  };

  // 表格高亮行
  setClassName = (record) => {
    return record.productId === this.state.activeIndex ? 'selectRow' : '';
  };
  // 表格页码响应
  handleTableChange = (pagination) => {
    const { current, pageSize } = pagination;
    this.setState({
      currentPage: current,
      pageSize: pageSize,
    });
  };
  render() {
    const { currentPage, pageSize } = this.state;
    const {
      keyFiguresM: { commoditiesData = [] },
    } = this.props;
    return (
      <div>
        <TableC
          columns={this.state.columns}
          loading={this.props.loading.effects['keyFiguresM/getCommoditiesData']}
          dataSource={commoditiesData}
          scroll={{ x: 'max-content' }}
          rowKey='productId'
          rowClassName={this.setClassName} //表格行点击高亮
          // hidePage={true}
          onChange={this.handleTableChange}
          current={currentPage}
          pageSize={pageSize}
          size={'small'}
        />
      </div>
    );
  }
}
